<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>${siteName!""}</title>
<#include "../common/header.ftl"/>

</head>

<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <!--左侧导航-->
    <aside class="lyear-layout-sidebar">

      <div class="lyear-layout-sidebar-scroll">
        <#include "../common/left-menu.ftl"/>
      </div>

    </aside>
    <!--End 左侧导航-->

    <#include "../common/header-menu.ftl"/>

     <!--页面主要内容-->
    <main class="lyear-layout-content">

      <div class="container-fluid">

        <div class="row" >
          <div class="col-lg-12">
              <div class="card" id="main" style="height: 400px;width: 600px;">
              </div>
          </div>

        </div>

      </div>

    </main>
    <!--End 页面主要内容-->
  </div>
</div>
<#include "../common/footer.ftl"/>
<script type="text/javascript" src="/admin/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/admin/js/main.min.js"></script>
<script src="/admin/js/echarts.min.js"></script>
<script src="/admin/js/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){

  });

  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  //AJAX接收数据主体
  $(document).ready(function () {
    $.get("/quantity/bookCount",function(result){
        // 指定图表的配置项和数据
       var option = {
           title: {
               text: '图书借阅统计'
           },
           legend: {
               data: ['借阅次数']
           },
           color: ['#3398DB'],
           tooltip: {
               trigger: 'axis',
               axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                   type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
               }
           },
           grid: {
               left: '3%',
               right: '4%',
               bottom: '3%',
               containLabel: true
           },
           xAxis: [
               {
                   type: 'category',
                   data:  result.data[0].bookName,
                   axisTick: {
                       alignWithLabel: true
                   }
               }
           ],
           yAxis: [
               {
                   type: 'value'
               }
           ],
           series: [
               {
                   name: '借阅次数',
                   type: 'bar',
                   barWidth: '60%',
                   data: result.data[0].bookCount
               }
           ]
       };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },'json');

  });

</script>
</body>
</html>
